import React from 'react';

const ZoomControls = ({ zoom, onZoomChange, minZoom = 0, maxZoom = 10 }) => {
  const zoomIn = () => {
    const newZoom = Math.min(maxZoom, zoom + 1);
    if (newZoom !== zoom) {
      onZoomChange(newZoom);
    }
  };

  const zoomOut = () => {
    const newZoom = Math.max(minZoom, zoom - 1);
    if (newZoom !== zoom) {
      onZoomChange(newZoom);
    }
  };

  const resetZoom = () => {
    onZoomChange(0);
  };

  return (
    <div className="zoom-controls">
      <button 
        className="zoom-btn" 
        onClick={zoomIn}
        title="放大"
        disabled={zoom >= maxZoom}
        style={{
          opacity: zoom >= maxZoom ? 0.5 : 1
        }}
      >
        +
      </button>
      
      <button 
        className="zoom-btn" 
        onClick={zoomOut}
        title="缩小"
        disabled={zoom <= minZoom}
        style={{
          opacity: zoom <= minZoom ? 0.5 : 1
        }}
      >
        -
      </button>
      
      <button 
        className="zoom-btn" 
        onClick={resetZoom}
        title="重置缩放"
        style={{
          fontSize: '14px',
          fontWeight: 'bold'
        }}
      >
        ↺
      </button>
      
      {/* 缩放级别指示器 */}
      <div style={{
        background: 'rgba(0, 0, 0, 0.8)',
        color: 'white',
        padding: '4px 8px',
        borderRadius: '4px',
        fontSize: '12px',
        textAlign: 'center',
        marginTop: '8px',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255, 255, 255, 0.1)'
      }}>
        {zoom.toFixed(1)}
      </div>
    </div>
  );
};

export default ZoomControls;